<template>
	<view class="AfterSaleDetails">
		<view class="Item" v-for="(item,index) in dataList.messages" :key="index">
				<view class="item_time">{{$dateFormat(item.date_add*1000,'Y-m-d H:i')}}</view>
				<view class="item_content">
					<view class="item_top top1" v-if="item.refund_state==1">
						<view class="top_left">{{item.title}}</view>
						<view class="top_right" @click="$linkTo(`./Application?refund_sn=${item.refund_sn}&id=${item.id}`)">查看申请详情</view>
					</view>
					<view class="item_top " v-if="item.refund_state!=1">
							<view class="top_left">{{item.title}}</view>
					</view>
					<view class="item_buttom" v-if="item.refund_state==1">
						<view class="buttom_content">商品状态：{{item.order_state}}
						</view>
						<view class="buttom_content">退款金额：￥{{item.price}}
						</view>
						<view class="buttom_content">售后原因：{{item.reason}}
						<text style="color: #007AFF;">[{{item.imageCount}}张图片]</text>
						</view>
					</view>
					<view class="item_buttom" v-if="item.refund_state==2 && item.refund_type==2">
						<view class="buttom_content">请将您收到的商品快递至以下地址并上传快递单号
						</view>
						<view class="buttom_content">地址：￥{{item.address}}
						</view>
						<view class="buttom_content">收件人：{{item.ali_name}}
						</view>
						<view class="buttom_content">电话：{{item.phone}}
						</view>
					</view>
					<view class="item_buttom" v-if="item.refund_state==3">
						<view class="buttom_content">拒绝原因：{{item.reason}}
						</view>
					</view>
					<view class="item_buttom" v-if="item.refund_state==4 && item.refund_type==2">
						<view class="buttom_content">快递公司：{{item.reason}}
						</view>
						<view class="buttom_content">快递单号：{{item.phone}}
						</view>
					</view>
					<view class="item_buttom" v-if="item.refund_state==5 && item.refund_type==2">
						<view class="buttom_content">您的退款将在3个工作日内退至以下途径
						</view>
						<view class="buttom_content">退款金额：￥{{item.price}}
						</view>
						<view class="buttom_content">支付宝：{{item.phone}}
						</view>
						<view class="buttom_content">收款人：{{item.ali_name}}
						</view>
					</view>
					<view class="item_buttom" v-if="item.refund_state==5 && item.refund_type==1">
						<view class="buttom_content">退款金额：￥{{item.price}}
						</view>
					</view>
					<view class="item_buttom" v-if="item.refund_state==6">
						<view class="buttom_content">{{item.content}}
						</view>
					</view>
				</view>
		</view>
		<view class="order_bottom savebottom" v-if="Item.state!='待发货'">
			<view class="order_cancel" @click="close(Item.refund_type==1? '再次申请':'取消申请',Item)">{{Item.refund_type==1? '再次申请':'取消申请'}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				refund_sn:'',
				dataList:[]
			}
		},
		onLoad(option) {
			this.refund_sn=option.refund_sn
			this.$request('/app/order/getRefundDetails','post',{
				access_token:uni.getStorageSync('access_token').replace(/^\"|\"$/g,''),
				refund_sn:this.refund_sn
			}).then(res=>{
				this.dataList=res.content
			})
		},
		methods: {
			close(e,i){
				if(e=='再次申请'){
					uni.navigateTo({
						url:'./refund?id=1'
					})
				}
				if(e=='取消申请'){
					this.$request('/app/order/cancal_refund','post',{
						access_token:uni.getStorageSync('access_token').replace(/^\"|\"$/g,''),
						refund_sn:this.refund_sn
					}).then(res=>{
						this.dataList=res.content
					})
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.AfterSaleDetails{
		height: 100%;
		background-color: #F3F4F5;
		    display: flex;
		    flex-direction: column;
		    align-items: center;
		.Item{
			width: 90%;
			.item_time{
				text-align: center;
				padding: 20rpx 0;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #9DA5A8;
			}
			.item_content{
				border: 1px solid #EEEEEE;
				background-color: #fff;
				.top1{
					background:url(/pagesB/static/direction_right_gray.png) no-repeat 626rpx 26rpx;
					background-size: 24rpx 24rpx;
				}
				.item_top{
					padding: 20rpx 50rpx 20rpx 30rpx;
					display: flex;
					justify-content: space-between;
					border-bottom: 1px solid #EEEEEE;
					.top_left{
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #111111;
					}
					.top_right{
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #9DA5A8;
					}
				}
			}
			.item_buttom{
				padding: 30rpx;
				.buttom_content{
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #111111;
				}
			}
		}
		.order_bottom{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 95%;
			display: flex;
			padding: 14rpx 20rpx;
			flex-direction: row-reverse;
			background-color: #fff;
			border-top: 1px solid #EBECEC;
			.order_cancel{
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				width: 230rpx;
				height: 70rpx;
				line-height: 70rpx;
				background: #FFFFFF;
				border-radius: 36rpx;
				text-align: center;
				border: 1px solid #999999;
			}
			.order_payment{
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				width: 230rpx;
				height: 70rpx;
				line-height: 70rpx;
				text-align: center;
				background: #DB1B22;
				border-radius: 36rpx;
				margin-left: 20rpx;
			}
		}
		.savebottom {
			padding-bottom: 0;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
		}
	}
</style>
